<template>
  <div class="city-1VGFB_0">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="city-1r2VH_0">
      <path fill-opacity=".38" d="M14.778 13.732a.739.739 0 1 1-1.056 1.036l-2.515-2.565a.864.864 0 0 1-.01-1.206 4.894 4.894 0 0 0 1.357-3.651c-.126-2.492-2.156-4.52-4.648-4.647a4.911 4.911 0 0 0-5.16 5.163c.126 2.475 2.13 4.496 4.605 4.642.451.026.896-.008 1.326-.1a.739.739 0 0 1 .308 1.446c-.56.12-1.137.164-1.72.13-3.227-.19-5.83-2.815-5.995-6.042a6.39 6.39 0 0 1 6.71-6.715c3.25.165 5.884 2.8 6.05 6.048a6.37 6.37 0 0 1-1.374 4.3l2.12 2.161z">
      </path>
    </svg>
    <input type="text" v-model="key" placeholder="输入城市名、拼音或首字母查询">
  </div>
</template>

<script>
    export default {
        name: "input-box",
      data(){
        return {
          key:""
        }
      },
      watch:{
          key:function(){
            this.$store.dispatch('setNewKey',this.key);
          }
      }
    }
</script>

<style scoped>

  .city-1VGFB_0 {
    height: 1.173333rem;
    height: 11.733333vw;
    background-image: -webkit-gradient(linear,left top,right top,from(#0af),to(#0085ff));
    background-image: -webkit-linear-gradient(left,#0af,#0085ff);
    background-image: linear-gradient(90deg,#0af,#0085ff);
    text-align: center;
    position: relative;
  }
  .city-1VGFB_0 .city-1r2VH_0 {
    position: absolute;
    width: .373333rem;
    width: 3.733333vw;
    height: .373333rem;
    height: 3.733333vw;
    left: .986667rem;
    left: 9.866667vw;
    top: .4rem;
    top: 4vw;
  }
  .city-1VGFB_0 input {
    width: 8.666667rem;
    width: 78.0vw;
    height: .8rem;
    height: 8vw;
    margin-top: .186667rem;
    margin-top: 1.866667vw;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .4rem;
    border-radius: 4vw;
    padding-left: .8rem;
    padding-left: 8vw;
  }

  button, input, select, textarea {
    outline: 0;
    border: none;
    font-family: inherit;
  }
</style>
